<template>

  <div class="divBox">



      <div>
        <el-button class="creButton" type="primary" size="mini" @click="skip()">创建灵感文</el-button>

      </div>

      <el-divider/>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple" id="div2" v-for="item of user">
          <div class="divBorder" @click="detail(item.id)">
            <ul class="ul1" >
              <li >
                <el-image
                  style="width: 90px; height: 90px"
                  :src="item.image"
                  fit="fill"></el-image>


                <span class="span3" style="font-size: 13px;font-weight:bold">{{item.title}}</span><br>
                <el-avatar class="ava" size="small" :src="item.authorImg"></el-avatar>
                <span class="span4" style="font-size: 8px;color: rgba(0,0,0,0.4);">{{item.author}}</span>
                <span class="span5" style="color:rgba(0,0,0,0.4);font-size: 5px; ">更新时间:{{item.time}}</span>


              </li>
              <br>
            </ul>

          </div>
            <el-divider/>
        </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple" id="div3" v-for="item of user1">
            <div class="divBorder" @click="detail(item.id)">
          <ul class="ul1">
            <li>
              <el-image
                style="width: 90px; height: 90px"
                :src="item.image"
                fit="fill"></el-image>

              <span class="span3" style="font-size: 13px;font-weight: bold">{{item.title}}</span><br>
              <el-avatar class="ava" size="small" :src="item.authorImg"></el-avatar>
              <span class="span4" style="font-size: 8px;color: rgba(0,0,0,0.4);">{{item.author}}</span>
              <span class="span5" style="color:rgba(0,0,0,0.4);font-size: 5px; ">更新时间:{{item.time}}</span>



            </li>


          </ul>
           </div>
            <el-divider/>
       </div>

        </el-col>

      </el-row>

    </div>




</template>

<script>
import {selectAll,selectAllTwo} from '@/api/inspiration';
export default {
  name: "index",
    data(){
    return{
      ids:0,
      user:{},
      user1:{},

    }
    }
    ,methods:{
    skip(){
      this.$router.push({
        path: '/inspiration/create',
       /* query: {
        id :id,
        }*/
      });
    },
    queryAll(){
      selectAll().then(res=>{
        this.user = res;


      })
    }
    ,queryAllTwo(){
      selectAllTwo().then(res=>{
        this.user1 = res;
      })
    }
    ,
    detail(id){
      this.$router.push({
        path: '/inspiration/detail',
         query: {
          ids:id
         }
      });
    }



  },
  created(){
      this.queryAll()
    this.queryAllTwo()
  }

}
</script>

<style scoped>
.divBorder{
  border-radius: 30px;

}

.ul1 li{
  display: inline-block;


}
#div2{
  position: relative;
}
#div2 .span3{
  position:absolute;
  top: 10px;
  left: 100px;
}

#div2 .span4{
  position:absolute;
  top: 50px;
  left: 130px;
}

#div2 .ava{
  position:absolute;
  top: 40px;
  left: 95px;
}

#div2 .span5{
  position:absolute;
  top: 80px;
  left: 100px;
}

#div3{
  position: relative;
}
#div3 .span3{
  position:absolute;
  top: 10px;
  left: 100px;
}

#div3 .span4{
  position:absolute;
  top: 50px;
  left: 130px;
}

#div3 .ava{
  position:absolute;
  top: 40px;
  left: 95px;
}

#div3 .span5{
  position:absolute;
  top: 80px;
  left: 100px;
}

.creButton{
  margin-left: 1100px;
}





</style>
